<template>
	<view class="content">
		<view class="cell" v-for="(item , index) in cellData" :key="index">
			<view class="top-cont">
				<view class="title">{{item.name}}</view>
				<view><wd-switch v-model="item.show" size="24px" active-color="#615DFF"/></view>
			</view>
			<view class="tips">{{ item.tips }}</view>
			<!--  -->
			<view class="showContent" v-if="item.show">
				<view class="item" v-for="(item2 ,index2) in item.list" :key="index2" @click="itemFun(item2)">
					<text class="itemKey">{{ item2.name }}</text>
					<view class="itemVal">
						<input type="text" disabled v-model="item2.val" :placeholder="`请选择${item2.placeholderText}`">
					</view>
					<wd-icon name="arrow-right" size="20px"></wd-icon>
				</view>
			</view>
		</view>
	</view>
	<wd-popup safe-area-inset-bottom v-model="pickerShow" position="bottom" custom-style="padding: 15px 15px; border-radius: 20px;" @close="handleClose">
		<view class="popuTitle">选择时间</view>
		<wd-datetime-picker-view type="time" v-model="value4" label="时分" />

		<view class="buttonCont">
			<button class="butClos">取消</button>
			<button class="sub">确定</button>
		</view>
	</wd-popup>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
const value4 = ref<string>('11:12')

const pickerShow = ref(false);//fux

const cellData = reactive([
	{
		name:'可用时段',
		tips :'设定学习机可用时段，非使用时段内，设备将自动进入锁屏状态，无法使用视频观看等功能。',
		show: false,
		list :[
			{
				name:'开始时间',
				type:'time',
				placeholderText:'开始时间',
				val:''
			},
			{
				name:'结束时间',
				type:'time',
				placeholderText:'结束时间',
				val:''
			},
			{
				name:'重复',
				type:'picker',
				placeholderText:'',
				val:''
			},
		]
	},
	{
		name:'护眼模式',
		tips :'在可用时段内，每使用一段时间需强制休息一会，期间设备将自动进入锁屏状态，无法使用视频观看等功能。',
		show: false,
		list :[
			{
				name:'使用时长',
				type:'time',
				placeholderText:'使用时长',
				val:''
			},
			{
				name:'休息时长',
				type:'time',
				placeholderText:'休息时长',
				val:''
			},

		]
	}
])

function handleClose(){

}

function itemFun(e:any){
	console.log(e)

	switch(e.type){
		case 'time':
		pickerShow.value = true
			break;
	}
}

</script>

<style lang="scss" scoped>
	.content{
		padding: 30upx;
		box-sizing: border-box;
		

		.cell{
			width: 100%;
			display: flex;
			flex-direction: column;
			padding: 30upx;
			box-sizing: border-box;
			border-radius: 20upx;
			background-color: #fff;
			gap: 20upx;
			margin-top: 30upx;

			.top-cont{
				width: 100%;
				display: flex;
				align-items: center;

				.title{
					flex: 1;
					font-size: 32upx;

				}
			}

			.tips{
				width: 100%;
				font-size: 28upx;
				color: #666666;
			}

		}

		.showContent{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 30upx;
			font-size: 30upx;
			.item{
				width: 100%;
				display: flex;
				align-items: center;
				background-color: #F9F9FB;
				border-radius: 20upx;
				padding: 24upx 20upx;
				box-sizing: border-box;

				.itemKey{
					flex: 1;
				}
				.itemVal{
					color: #A9AAB5;
					input{
						text-align: right;
						// width: 200upx;
					}

				}
			}
		}
	}

	.popuTitle{
		width: 100%;
		font-size: 32upx;
	}
	.buttonCont{
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 16upx;
		font-size: 30upx;
		gap: 20upx;
		.butClos{
			width: 230upx;
			height: 90upx;
			background-color: #EFEFFF;
			color: #615DFF;
			border-radius: 20upx;
		}
		.sub{
			width: 440upx;
			height: 90upx;
			background-color: #615DFF;
			color: #fff;
			border-radius: 20upx;
		}

	}
</style>
